<template>
	<view class="page">
		<u-sticky :offsetTop="0">
			<view class="head-tabs" >
				<view class="tabs-wrap">
					<u-tabs :current="tabCurrent" :scrollable="false" :list="tabList" keyName="title" lineColor="#44C4BE"
						:lineWidth="20" :lineHeight="3" @click="tabClick"
						:itemStyle="{height: '50px',fontSize: '28rpx',color:'#666666'}"
						:activeStyle="{fontWeight: '600',color: '#222222' }" :inactiveStyle="{}"></u-tabs>
				</view>
			</view>
		</u-sticky>
		
		
		<view class="page-ctx">
			<view class="coupon-wrap">
				<view class="coupon-group">
					<view class="list-box" v-if="!showEmpty">
						<view class="coupon-list">
							<view class="coupon-item" v-for="(item,index) in coupons" :key="index">
								<view class="top-box flex-between">
									<view class="title-box">
										<view class="title">
											{{item.title}}
										</view>
										<view class="date">
											有效期为：{{ item.startTime }}至{{item.endTime}}
										</view>
									</view>
									<view class="price-box">
										<view class="price-info">
											<text class="huobi">
												￥
											</text>
											<text class="money">
												{{item.jian}}
											</text>
										</view>
										<view class="tiaojian">
											{{item.tiaojian}}
										</view>
									</view>
								</view>

								<view class="line-box">

								</view>

								<view class="bottom-box">
									<view class="btn-wrap flex-between">
										<view class="btn-rule flex" @click="toggle_expand(item)">
											<view class="text">
												使用规则
											</view>
											<view class="sanjiao">
												<u-icon v-if="item.is_expand" name="arrow-up-fill" color="#000000" size="10"></u-icon>
												<u-icon v-else name="arrow-down-fill" color="#000000" size="10"></u-icon>
											</view>
										</view>

										<view class="btn-pick">
											<view v-if="tabSelect.value == 1" class="btn flex-center" @click="doCouponUse(item)">
												去使用
											</view>
											<view v-if="tabSelect.value == 2" class="btn flex-center used">
												已使用
											</view>
											<view v-if="tabSelect.value == 3" class="btn flex-center expired">
												已过期
											</view>
										</view>
									</view>
									<view class="content-wrap" v-if="item.is_expand">
										{{item.content}}
									</view>
								</view>
							</view>
						</view>
					</view>



					<view class="empty-box" v-else>
						<view class="empty-image-box">
							<!-- <image :src="getAssets(`@/static/static-online/empty/empty.png`)" mode=""></image> -->
							<image src="@/static/static-online/empty/empty.png" mode=""></image>
						</view>
						<view class="empty-title">
							暂无优惠劵
						</view>
						<view class="empty-btn flex-center" v-if="tabSelect.title == '未使用'" @click="toRoute('/coupon-center')">
							领取优惠券
						</view>
					</view>

				</view>
			</view>

		</view>

		<!-- <coupon_content_pop ref='coupon_content_pop' @confirm="confirmUseCoupon"></coupon_content_pop> -->
	</view>
</template>

<script>
	// import coupon_content_pop from '@/components/coupon/coupon_content_pop.vue'
	export default {
		components: {
			// coupon_content_pop
		},
		data() {
			return {
				id: '',
				store_id: '', //门店id
				from: '', //个人中心  下单 
				showEmpty: false,

				//

				tabCurrent: 0,
				tabSelect: {
					title: '未使用',
					value: 1,
				},
				tabList: [
					// {
					// 	title: '全部',
					// 	value: 0,
					// },
					{
						title: '未使用',
						value: 1,
					},
					{
						title: '已使用',
						value: 2,
					},
					{
						title: '已过期',
						value: 3,
					},
				],

				coupons: [],
				pagination: {
					page: 1,
					pageNum: 6
				},
				loadmore_status: 'loadmore', //loadmore  / loading / nomore
			}
		},
		onLoad() {

		},
		onShow() {
			this.initQuery();
			this.setView();
		},
		onHide() {},

		onPullDownRefresh() {

		},
		onReachBottom() {
			this.loadMore()
		},

		methods: {
			loadMore() {
				if (this.loadmore_status == 'loadmore') {
					this.loadmore_status = 'loading'
					this.pagination.page++;
					this.query_coupon();
				}
			},
			initQuery() {
				this.coupons = [];
				this.pagination.page = 1;
				this.loadmore_status = 'loadmore'
			},

			setView() {
				this.query_coupon()
			},
			query_coupon() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'yhq_myList',
						...this.pagination,
						type: 1,
						scene: this.tabSelect.value, //0全部 1未使用 2已使用 3已过期
					},
				}).then(res => {
					if (res.code == 200) {
						let list =  res.data.list || []
						let count = res.data.count
						
						list.forEach(v => {
							this.handle_item_data(v)
						})
						this.coupons = this.coupons.concat(list);
						this.loadmore_status = count > this.coupons.length ? 'loadmore' : 'nomore';
					}

					if (this.tabSelect.value == 1 && this.coupons.length == 0) {
						this.showEmpty = true;
					} else {
						this.showEmpty = false;
					}
				})
			},

			handle_item_data(v) {
				v.is_expand = false;
				v.man = parseFloat(v.man);
				v.jian = parseFloat(v.jian);
				v.tiaojian = v.man == 0 ? '无门槛' : `满${v.man}元可用`
			},

			tabClick(item) {
				this.tabSelect = item
				this.initQuery();
				this.setView();
			},

			toggle_expand(item) {
				item.is_expand = !item.is_expand
				let index = this.coupons.findIndex(v => v.id == item.id)
				this.coupons.splice(index, 1, item)
			},

			doCouponUse(item) {
				let yhqId=""
				if(item.tiaojian!='通用'){
					yhqId=item.id
				}
				this.toRoute({
					path: '/product-list',
					query: {
						title: '优惠券商品',
						coupon_id: yhqId,
					}
				})
			}

		}
	}
</script>


<style lang="scss">
	page {
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	.page-ctx {
		padding: 0 0;
	}

	.head-tabs {
		// position: fixed;
		// z-index: 10;
		// top: 0;
		// left: 0;
		// right: 0;
		background: #fff;
	}

	.tabs-wrap {
		padding-top: 0;
		box-shadow: 0rpx -10rpx 10rpx 1rpx rgba(0, 0, 0, 0.08);
		background: #F6F6F6;
		background: #FFF;
		border-bottom: 1rpx solid #eee;

	}

	.coupon-wrap {
		padding: 24rpx 32rpx;
	}

	.coupon-wrap {}


	.coupon-tip {
		padding: 16rpx 32rpx;
		min-height: 72rpx;
		background: #F8F8F8;

		.tip {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
		}

		.btn {
			min-width: 120rpx;
			height: 48rpx;
			background: #CB0011;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}


	.coupon-group {
		margin-bottom: 50rpx;

		.list-box {
			.coupon-list {}
		}
	}





	.coupon-item {
		margin-bottom: 16rpx;
		position: relative;
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;

		.top-box {
			.title-box {
				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
				}

				.date {
					margin-top: 12rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
			}

			.price-box {
				.price-info {
					text-align: right;

					.huobi {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #FF0000;
					}

					.money {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 48rpx;
						color: #FF0000;
					}
				}

				.tiaojian {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
				}
			}
		}

		.line-box {
			width: 639rpx;
			margin: 25rpx auto 32rpx;
			border-bottom: 1rpx dashed #E6E7EE;
		}

		.bottom-box {
			.btn-wrap {
				.btn-rule {
					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
					}

					.sanjiao {
						margin-left: 16rpx;
					}
				}

				.btn-pick {
					.btn {
						padding: 0 8rpx;
						min-width: 132rpx;
						height: 64rpx;
						background: #CB0011;
						border-radius: 32rpx 32rpx 32rpx 32rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;

						&.picked {
							background: #dddddd;
						}

						&.used {
							background: #9695A3;
						}

						&.expired {
							background: #C1C4CF;
						}
					}
				}
			}

			.content-wrap {
				margin-top: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;

				white-space: break-spaces;
			}
		}

	}





	.empty-box {
		padding-top: 130rpx;

		.empty-image-box {
			margin: 0 auto;
			width: 360rpx;
			height: 360rpx;


			image {
				width: 360rpx;
				height: 360rpx;
			}
		}

		.empty-title {
			margin-top: 80rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}

		.empty-btn {
			margin: 0 auto;
			margin-top: 20rpx;
			width: 400rpx;
			height: 80rpx;
			background: #CB0011;
			border-radius: 40rpx 40rpx 40rpx 40rpx;


			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}
</style>